<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function resize(id)
        {
            var target = document.getElementById(id);
            var x = document.body.offsetLeft + target.offsetLeft + target.offsetWidth;
            var y = document.body.offsetTop + target.offsetTop + target.offsetHeight;
            eventSender.mouseMoveTo(x - 6, y - 7);
            eventSender.mouseDown();
            eventSender.mouseMoveTo(x + 13, y + 14);
            eventSender.mouseUp();
        }
        function test()
        {
            if (!window.testRunner)
                return;
            resize("div");
            resize("div-with-stacked-child");
            resize("textarea1");
            resize("textarea2");
            resize("iframe1");
        }
    </script>
    <style>
        .target {
            width: 150px;
            height: 100px;
            resize: both;
        }
    </style>
</head>
<body onload="test()">
    <hr>
    <p>
        Test for
        <i><a href="https://bugs.webkit.org/show_bug.cgi?id=9547">http://bugzilla.opendarwin.org/show_bug.cgi?id=9547</a>
        Resize corner does not track the mouse accurately</i>.
    </p>
    <hr>
    <div id="div" class="target" style="overflow: auto; border: blue 2px solid;"></div>
    <div id="div-with-stacked-child" class="target" style="overflow: auto; border: blue 2px solid;">
        <div style="width: 149px; height: 98px; position: relative; background: yellow"></div>
    </div>
    <textarea id="textarea1" class="target" style="border: blue 2px solid;"></textarea>
    <textarea id="textarea2" class="target"></textarea>
    <iframe id="iframe1" class="target"></iframe>
</body>
